<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送消息案例</title>
</head>
<style>
    *{
        padding:0;
        margin: 0;
            }
.box{
    width: 800px;
    margin: auto;
}
.box .content{
    width: 100%;
    height:400px;
    border: 1px solid blue;
    margin:20px auto;
    padding:10px;
    box-sizing: border-box;
    /* 规定两个并排的带边框的框： */
}
.box .content li{
    margin: 10px 0;
    padding :5px;
    line-height:2;
    border-radius: 5px;
    clear: both;
}
.box textarea{
    width:100%;
    height: 80px;
    display: block;
    /* 此元素将显示为块级元素，此元素前后会带有换行符。  */
    margin: auto;
    margin-top: 20px;
}
.box button{
    width:80px;
    height:30px;
    border: 1px solid yellowgreen;
    float:right;
    margin-top:10px;
}
.active{
    float:right;
    background-color: orchid;
    color: #fff;
}
p{
    color: orchid;
    font-size: 12px;
}
</style>
<body>
    <div class="box">
        <ul class="content"></ul>
        <textarea name="" id="text" cols="30" rows="10"></textarea>
<button id="btn"></button>
<p>温馨提示;按住ctrl+shift键也可以发送消息喔！</p>
    </div>
    <script>
    // 思路：1.点击发送的时候 获取输入框的信息
    // 2.把信息写入content里面
    // 首先获取所需要的元素
    var content=document.querySelector('.concent');
    var text =docunment.querySelector('#text');
    var btn=document.querySeletor('#btn');
    // 给按钮绑定点击事件
btn.onclick=function(){
    if(text.value){
        renden()
    }else
    {
        alert('内容不能够为空！')
    }
}
// 按下ctrl+shift键就可以发送消息
text.onkeydown=function(){
    // keydown可以同时监听多个事件
    if(e.ctrlKey&&e.shiftKey){
        if(text.value){
            renden();
        }else{
            alert('内容不能为空！')
        }
    }
}
function renden(){
    // 获取输入框的内容 并且创建一个元素来接收内容
    var li=document.createElement('li');
    // createElement() 方法通过指定名称创建一个元素
    li.className='active';
    li,innerHTML=text.value;
    content.appendChild(li);
    // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
    // 把创建的这个标签写入content
    text.value='';
    // 发送完成后清空输入框的内容

}
    </script>
    
</body>
</html>